<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { collectionUpdate, collectionInfo } from "@/apis/my";
import { uploadImg } from "@/utils/request";
import { toast, checkPhon, checkBankCard } from "@/utils/tools";

let state = reactive({
  introducerName: "", //姓名
  introducerTel: "", //联系方式
  bankCardNumber: "", //银行款号
  carBlank: "", //开户行
  cardImage1: "", //身份证正面照片路径
  cardImage2: "", //身份证反面照片路径
  businessLicense: "", //营业执照
  bankCardImage1: "", //银行卡号正面照片路径
  bankCardImage2: "", //银行卡号反面照片路径
});

// 收款信息  查询
const getCollectionInfo = async () => {
  let { data = {}, code } = await collectionInfo();
  if (code == "200") {
    state.introducerName = data.introducerName ?? ""; //姓名
    state.introducerTel = data.introducerTel ?? ""; //联系方式
    state.bankCardNumber = data.bankCardNumber ?? ""; //银行款号
    state.carBlank = data.carBlank ?? ""; //开户行
    state.cardImage1 = data.cardImage1 ?? ""; //身份证正面照路径
    state.cardImage2 = data.cardImage2 ?? ""; //身份证反面照片路径
    state.businessLicense = data.businessLicense ?? ""; //营业执照
    state.bankCardImage1 = data.bankCardImage1 ?? ""; //银行卡号正面照片路径
    state.bankCardImage2 = data.bankCardImage2 ?? ""; //银行卡号反面照片路径
  }
};

// 收款信息  查询
const getCollectionUpdate = async () => {
  let params = {
    introducerName: state.introducerName, //姓名
    introducerTel: state.introducerTel, //联系方式
    bankCardNumber: state.bankCardNumber.replace(/\s*/g, ""), //银行款号
    carBlank: state.carBlank, //开户行
    cardImage1: state.cardImage1, //身份证正面照片路径
    cardImage2: state.cardImage2, //身份证反面照片路径
    businessLicense: state.businessLicense, //营业执照
    bankCardImage1: state.bankCardImage1, //银行卡号正面照片路径
    bankCardImage2: state.bankCardImage2, //银行卡号反面照片路径
  };
  let { rows, code, msg } = await collectionUpdate(params);
  // toast(msg);
  if (code == "200") {
    setTimeout(function () {
      uni.navigateBack();
    }, 1500);
  }
};

const handleUploadImage = (type: any) => {
  // let files = e.file;
  uni.chooseImage({
    count: 1,
    sizeType: ["original", "compressed"],
    sourceType: ["album"],
    success: (imgRes: any) => {
      let files = imgRes.tempFiles;
      files.forEach(async (item: any, index: number) => {
        let resUpload = await uploadImg(item.path);
        if (type == "cardImage1") {
          state.cardImage1 = resUpload.data.url;
        } else if (type == "cardImage2") {
          state.cardImage2 = resUpload.data.url;
        } else if (type == "bankCardImage1") {
          state.bankCardImage1 = resUpload.data.url;
        } else if (type == "bankCardImage2") {
          state.bankCardImage2 = resUpload.data.url;
        } else if (type == "businessLicense") {
          state.businessLicense = resUpload.data.url;
        }
      });
    },
  });
};
const isValidBankCardNumber=(cardNumber:any)=> {
  // 去除空格和短横线
  const normalizedCardNumber = cardNumber.replace(/\s|-/g, '');

  // 正则表达式校验卡号长度和开头数字
  const cardPattern = /^(62|4\d{3}|5[1-5]\d{2}|6011|65|3[47]\d{2}|30[0123]\d|305\d)\d{12,19}$/;
  if (!cardPattern.test(normalizedCardNumber)) {
      return false;
  }

  // Luhn算法校验
  function luhnCheck(value:any) {
      let sum = 0;
      let shouldDouble = false;
      for (let i = value.length - 1; i >= 0; i--) {
          let digit:any = parseInt(value[i], 10);
          if (shouldDouble) {
              digit *= 2;
              if (digit > 9) {
                  digit -= 9;
              }
          }
          sum += digit;
          shouldDouble = !shouldDouble;
      }
      return sum % 10 === 0;
  }

  return luhnCheck(normalizedCardNumber);
}
const saveClick = () => {
  if (!state.introducerName) {
    toast("请填写开户名！");
    return false;
  }
  if (!state.introducerTel) {
    toast("请填写联系方式！");
    return false;
  }
  if (!checkPhon(state.introducerTel)) {
    toast("联系方式格式不正确！");
    return false;
  }
  if (!state.bankCardNumber) {
    toast("请填写银行卡号！");
    return false;
  }
  // if (!checkBankCard(state.bankCardNumber.replace(/\s*/g,""))) {
  //   toast('银行卡号格式不正确！');
  //   return false;
  // }
  if (isValidBankCardNumber(state.bankCardNumber)===false) {
    toast("银行卡号格式不正确！");
    return false;
  }
  if (!state.carBlank) {
    toast("请填写开户行！");
    return false;
  }
  if (!state.cardImage1) {
    toast("请上传身份证正面照片！");
    return false;
  }
  if (!state.cardImage2) {
    toast("请上传身份证反面照片！");
    return false;
  }
  if (!state.bankCardImage1) {
    toast("请上传银行卡号正面照片！");
    return false;
  }
  if (!state.bankCardImage2) {
    toast("请上传银行卡号反面！");
    return false;
  }
  getCollectionUpdate();
};

onLoad(() => {
  // 收款信息  查询
  getCollectionInfo();
});
</script>

<template>
  <view class="margin-bt-box">
    <view class="card-box">
      <view class="inp-box flex flex-item-center">
        <view class="li-title">
          <text class="red-text">*</text>
          <text>开户名：</text>
        </view>
        <input
          type="text"
          placeholder="请输入"
          v-model="state.introducerName"
        />
      </view>
      <view class="inp-box flex flex-item-center">
        <view class="li-title">
          <text class="red-text">*</text>
          <text>联系方式：</text>
        </view>
        <input type="text" placeholder="请输入" v-model="state.introducerTel" />
      </view>
      <view class="inp-box flex flex-item-center">
        <view class="li-title">
          <text class="red-text">*</text>
          <text>银行卡号：</text>
        </view>
        <input
          type="number"
          placeholder="请输入"
          v-model="state.bankCardNumber"
        />
      </view>
      <view class="inp-box flex flex-item-center">
        <view class="li-title">
          <text class="red-text">*</text>
          <text>开户行：</text>
        </view>
        <input type="text" placeholder="请输入" v-model="state.carBlank" />
      </view>
    </view>
    <view class="card-box">
      <view class="inp-box flex flex-item-center">
        <view class="li-title">
          <text class="red-text">*</text>
          <text>请上传银行卡照片：</text>
        </view>
      </view>
      <view class="img-list flex flex-between">
        <view class="img-box" @tap="handleUploadImage('bankCardImage1')">
          <image
            src="@/static/images/identity.png"
            v-if="!state.bankCardImage1"
          />
          <text v-if="!state.bankCardImage1">银行卡正面</text>
          <image :src="state.bankCardImage1" v-else />
        </view>
        <view class="img-box" @tap="handleUploadImage('bankCardImage2')">
          <image
            src="@/static/images/identity.png"
            v-if="!state.bankCardImage2"
          />
          <text v-if="!state.bankCardImage2">银行卡反面</text>
          <image :src="state.bankCardImage2" v-else />
        </view>
      </view>
      <view class="inp-box flex flex-item-center">
        <view class="li-title">
          <text class="red-text">*</text>
          <text>请上传身份证照片：</text>
        </view>
      </view>
      <view class="img-list flex flex-between">
        <view class="img-box" @tap="handleUploadImage('cardImage1')">
          <image
            src="@/static/images/identity.png"
            v-if="!state.cardImage1"
          />
          <text v-if="!state.cardImage1">身份证正面</text>
          <image :src="state.cardImage1" v-else />
        </view>
        <view class="img-box" @tap="handleUploadImage('cardImage2')">
          <image
            src="@/static/images/identity.png"
            v-if="!state.cardImage2"
          />
          <text v-if="!state.cardImage2">身份证反面</text>
          <image :src="state.cardImage2" v-else />
        </view>
      </view>
    </view>
    <view class="btn-box">
      <button @tap="saveClick">保 存</button>
    </view>
  </view>
</template>

<style lang="scss"   scoped>
//
.card-box {
  margin-top: 26rpx;
  background-color: rgba(255, 255, 255, 1);

  .inp-box {
    padding: 30rpx;
    box-sizing: border-box;
    border-bottom: 2rpx solid rgba(239, 239, 239, 1);

    &:last-child {
      border-bottom: none;
    }

    .li-title {
      color: #101010;

      .red-text {
        margin-right: 8rpx;
        font-size: 28rpx;
        color: rgba(231, 45, 17, 1);
      }

      text {
        font-size: 28rpx;
      }
    }

    input {
      flex: 0.9;
      font-size: 28rpx;
    }
  }

  .img-list {
    padding: 15px;

    .img-box {
      flex: 0.47;
      position: relative;

      image {
        width: 100%;
        // width: 165.5px;
        height: 103px;
        border-radius: 8px;
      }

      text {
        position: absolute;
        left: 50%;
        bottom: 10px;
        transform: translateX(-50%);
        color: rgba(16, 16, 16, 1);
        font-size: 12px;
      }
    }
  }
}

.button-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 30px 30px;
  box-sizing: border-box;

  button {
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(
      0deg,
      rgba(191, 1, 3, 1) 0%,
      rgba(255, 84, 2, 1) 99.2%
    );
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    border: 0px solid rgba(187, 187, 187, 1);
  }
}

.margin-bt-box {
  padding-bottom: 140px;
}
</style>
